<template>
  <div class="user-profile">
    <img v-if="user_info.avatar.length > 0" @click="onEditAvatar" class="avatar" :src="user_info.avatar" >
    <img v-else @click="onEditAvatar" class="avatar" src="../../assets/image/avatar.jpg" >
    <input id="file"
      ref="avatarUploadInput"
      accept=".jpg, .jpeg, .png"
      @change="onSelectAvatar"
      type="file"
      name="file"
      value="修改头像"
      style="visibility: hidden;height:1px;"
    >

    <p v-show="edit.nickname === false" @click="edit.nickname = true" class="nickname">{{user_info.nickname}}</p>
    <input
      v-if="edit.nickname === true"
      @blur="onDoneEditNickname"
      @keypress.enter="onDoneEditNickname"
      class="nickname-edit"
      type="text"
      v-model="user_info.nickname"
    >
    <button @click="onLike" class="btn" :class="[user_info.is_like  ? 'btn-like' : null]">❤</button>
    <div class="crop-image" v-if="crop_image_show">
      <img id="user-profile-avatar"  :src="user_info.avatar" >
      <button class="btn success" style="margin: 10px;" @click="onDoneCropAvatar" >完成</button>
    </div>
  </div>
</template>

<script>
import db from '@/modules/common/db.js'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export const USER_INFO = {
  uid: 0,
  nickname: '',
  avatar: '',
  is_like: false
}
let cropper = null
export default {
  name: 'UserProfile',
  // props: ['user_info'],
  data () {
    return {
      crop_image_show: false,
      edit: {
        nickname: false,
        avatar: false
      },
      user_info: {
        ...USER_INFO
      }
    }
  },
  mounted () {
    this.initUserInfo()
  },
  methods: {
    onLike: function () {
      this.user_info.is_like = !this.user_info.is_like
      db.set('user_info', this.user_info)
    },
    onSelectAvatar: function (e) {
      let file = e.target.files[0]
      this.crop_image_show = true
      console.log(file)
      const reader = new FileReader()
      reader.onload = (e) => {
        this.user_info.avatar = reader.result
        this.$nextTick(() => {
          const image = document.getElementById('user-profile-avatar')
          cropper = new Cropper(image, {
            aspectRatio: 1
          })
        })
        // db.set('user_info', this.user_info)
      }
      reader.readAsDataURL(file)
    },
    onDoneCropAvatar: function () {
      cropper.crop()
      let url = cropper.getCroppedCanvas().toDataURL()
      this.user_info.avatar = url
      db.set('user_info', this.user_info)
      this.crop_image_show = false
    },
    onEditAvatar: function () {
      console.log(this.$refs.avatarUploadInput)
      this.$refs.avatarUploadInput.click()
    },
    onDoneEditNickname: function () {
      db.set('user_info', this.user_info)
      this.edit.nickname = false
    },
    initUserInfo: function () {
      let info = db.get('user_info', USER_INFO)
      this.user_info.avatar = info.avatar
      this.user_info.nickname = info.nickname
      this.user_info.is_like = info.is_like
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.crop-image {
  display: block;
  position: absolute;
  width: 400px;
  height: 450px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: white;
  border: 1px solid #EEE;
  box-shadow: 4px 4px 8px;
  border-radius: 8px;
}
.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 10px;
}

.avatar:hover {
  cursor: pointer;
}

.nickname {
  font-size: 16px;
  text-align: center;
}

.nickname-edit {
  font-size: 16px;
  text-align: center;
}

.btn-like {
  color: white;
  background: #ff5722;
}
</style>
